import * as React from "react";
import { useHistory } from "react-router-dom";
import style from "./style.module.css";
import Toast from "../../components/Toast";
import * as api from "../../services/user.services";
import IconFont from "../../assets/icon";
import { useRef } from "react";
import { IUser } from "../../types";

export default function Setting() {
  const history = useHistory();
  const [username, setUsername] = React.useState<string>();
  const [positionName, setPositionName] = React.useState<string>();
  const [sex, setSex] = React.useState<number>();
  const [user, setUser] = React.useState<IUser>();
  const openBtn = useRef<HTMLInputElement>(null);
  const test = async () => {
    try {
      let result = await api.testInfo(username, positionName, sex);
      if (result.stat === "OK") {
        Toast("修改信息成功");
      }
    } catch {}
    history.push("/Mine");
  };

  const userInfo = React.useCallback(async () => {
    let result = await api.userInfo();
    if (result.stat === "OK") {
      setUser(result.data);
    }
  }, []);

  React.useEffect(() => {
    userInfo();
  }, [userInfo]);

  const onOpenChange = async () => {
    let file = openBtn.current?.files;
    for (let i in file) {
      if (file[0].type.startsWith("image")) {
        await api.userAvatar(file[0]);
      }
    }
    userInfo();
  };

  return (
    <div className={style.back}>
      <div className={style.head}>
        <IconFont
          className={style.icon}
          type="icon-houtui"
          onClick={history.goBack}
        />
        <div className={style.title}>
          <span className={style.text}>个人设置</span>
        </div>
      </div>
      <div className={style.wrapper}>
        <div className={style.demo}>
          <span>姓名</span>
          <input
            type="text"
            placeholder="请填写姓名"
            className={style.inputText}
            onChange={(event) => {
              setUsername(event.target.value);
            }}
          />
        </div>
        <div className={style.demo}>
          <span>职位</span>
          <input
            type="text"
            placeholder="请填写职位"
            className={style.inputText}
            onChange={(event) => {
              setPositionName(event.target.value);
            }}
          />
        </div>
        <div className={style.demo}>
          <label>性别</label>
          <div className={style.radio}>
            <input
              type="radio"
              name="radio"
              checked
              className={style.checkbox}
              onChange={() => {
                setSex(1);
              }}
            />
            <span className={style.sex}>先生</span>
            <input
              type="radio"
              name="radio"
              className={style.checkbox}
              onChange={() => {
                setSex(2);
              }}
            />
            <span className={style.sex}>女士</span>
          </div>
        </div>
        <div className={style.demo1}>
          <span className={style.ava}>头像</span>
          <div className={style.avatarWrap}>
            <input
              type="file"
              className={style.inputText}
              ref={openBtn}
              onChange={onOpenChange}
            />
            <img
              className={style.pic}
              src={`/api/user/download/${user?._id}`}
              alt=""
            />
          </div>
        </div>
      </div>
      <button className={style.outputButton} onClick={test}>
        保存修改
      </button>
    </div>
  );
}
